<template>
    <div class="mainpages-title">
        <Logo1></Logo1>
        <div class="mainpages-durationTime">
            安全施工：
            <span style="color: #ffeb3b">
                    {{durationTime}}
                </span>
        </div>
        <div class="mainpages-titles">
            <div class="gis-titles">{{$route.meta.title}}</div>
            <div class="gis-titles-min">
                <i class="iconfont icon-dizhi"></i>
                海南省
                <i class="iconfont icon-dian2" style="margin: 0"></i>
                儋州市
            </div>
        </div>
        <div class="weather">
            {{nowtime}}
            {{weather.weather}}
            {{weather.temperature}}℃
        </div>
    </div>
</template>

<script>
    import Logo1 from '@/components/Logo1.vue'

    export default {
        name: "GisplusTitle",
        components: {
            Logo1
        },
        data() {
            return {
                nowtime: '',
                weather: {},
                mapArray: {
                    hutong: false,
                    fuwuqu: false,
                    qiao: false,
                    sui: false,
                },
                fullscreen: false,
                durationTime: ''
            }
        },
        mounted() {
            let that = this
            that.currentWeather()
            setInterval(function () {
                let oldTime = new Date('2018-03-12 00:00:00')
                let nowTime = new Date()
                let durationTime = nowTime.getTime() - oldTime.getTime()
                let d = Math.floor(durationTime / 1000 / 60 / 60 / 24)
                let h = Math.floor(durationTime / 1000 / 60 / 60) % 24
                let m = Math.floor(durationTime / 1000 / 60) % 60
                let s = Math.floor(durationTime / 1000) % 60
                that.durationTime = d + '天' + h + '时' + m + '分' + s + '秒'
                that.nowtime = nowTime.Format('yyyy-MM-dd hh:mm:ss')
            }, 1000)
        },
        methods: {
            currentWeather() {
                const that = this
                return that.request.currentWeather().then(function (response) {
                    that.weather = response.content
                })
                    .catch(function (error) {
                        that.fetchError = error
                    })
            },
        }
    }
</script>

<style scoped lang="scss">
    .mainpages-title {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;
        background-image: url('../../assets/img/renyuan-title.png');
        background-size: 120% 200%;
        background-repeat: no-repeat;
        background-position: center -50px;
        font-size: 0.24rem;
        color: #fff;
        text-align: center;
        line-height: 0.7rem;
        z-index: 1;
        display: flex;
        justify-content: space-between;
    }

    .mainpages-durationTime {
        font-size: 0.2rem;
        flex: 1;
        padding-left: 2rem;
    }

    .weather {
        flex: 1;
        padding-right: 1.5rem;
        font-size: 0.2rem;
    }

    .mainpages-titles {
        font-size: 0.24rem;
        position: relative;
        flex: 2;

        .gis-titles {

        }

        .gis-titles-min {
            position: absolute;
            top: 0.45rem;
            left: 0;
            right: 0;
            margin: 0 auto;
            font-size: 12px;
            height: 0.2rem;
            line-height: 0.2rem;
        }

    }
</style>
